<template>
  <div id="ModifyInfo">
    <div class="wrap">
      <label for="avatar">头像：</label>
      <input type="file" name="点击上传" id="avatar" ref="avatar" />
    </div>
    <div class="wrap">
      <label for="oldPassword">旧密码：</label>
      <input type="password" id="oldPassword" v-model="oldPassword" />
    </div>
    <div class="wrap">
      <label for="newPassword">新密码：</label>
      <input type="password" id="newPassword" v-model="newPassword" />
    </div>
    <button @click="confirm">确认修改</button>
    <p class="w_tip" v-show="isWrong">密码输入有误，请重试！</p>
    <p class="s_tip" v-show="isSuccess">密码修改成功，请退出后重新登录~</p>
    <p class="s_tip" v-show="updateAvatar">上传头像成功</p>
  </div>
</template>

<script>
import { Cookie } from "../until/Cookie";
import { Request } from "../until/request";
export default {
  name: "ModifyInfo",
  data() {
    return {
      oldPassword: "",
      newPassword: "",
      isWrong: false,
      isSuccess: false,
      updateAvatar:false
    };
  },
  mounted() {},
  methods: {
    confirm() {
      console.log(this.oldPassword != "", this.newPassword != "");
      if (this.oldPassword != "" && this.newPassword != "") {
        let oldPassword = sessionStorage.getItem("password");
        if (this.oldPassword == oldPassword) {
          let userid = sessionStorage.getItem("userId");
          let req = new Request();
          let formdata = new FormData();
          formdata.append("id", userid);
          formdata.append("newPassword", this.newPassword);
          req
            .send("post", "api/api/passwordUpdate", formdata)
            .then(res => {
              if (res.data.code == 200) {
                console.log(res);
                
                this.isSuccess = true;
                setTimeout(() => {
                  this.isSuccess = false;
                  
                }, 1500);
              }
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          this.isWrong = true;
          setTimeout(() => {
            this.isWrong = false;
          }, 500);
        }
      }
      if (this.$refs.avatar.files[0] != undefined) {
        let userid = sessionStorage.getItem("userId");
        let req = new Request();
        let formdata = new FormData();
        formdata.append("id", userid);
        formdata.append("avatar", this.$refs.avatar.files[0]);
        req
          .send("post", "api/api/updateAvatar", formdata)
          .then(res => {
            if (res.data.code == 200) {
              console.log(res);
              this.updateAvatar = true;
              setTimeout(() => {
                this.updateAvatar = false;
              }, 1500);
            }
          })
          .catch(err => {
            console.log(err);
          });
        // console.log(this.$refs.avatar.files[0]);api/updateAvatar
      }
    }
  }
};
</script>

<style  scoped>
#ModifyInfo {
  padding: 8rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wrap {
  height: 4rem;
  width: 20rem;
}
.wrap label {
  width: 5rem;

  margin-right: auto;
}

#newPassword,
#oldPassword {
  height: 2rem;
  width: 14rem;
  padding: 0 0.5rem;
  border: 1px solid #ccc;
  border-radius: 0.3rem;
}

button {
  height: 2rem;
  width: 20rem;
  border-radius: 0.5rem;
  color: white;
  background: #1a8cff;
  cursor: pointer;
}
button:hover {
  background: #0073e6;
}
.w_tip {
  margin-top: 1rem;
  color: red;
  font-size: 1.2rem;
}
.s_tip {
  margin-top: 1rem;
  color: #1a8cff;
  font-size: 1.2rem;
}
</style>